<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,th,td,s{
				margin:0;
				padding:0;
				font-family:"微软雅黑",Tahoma,sans-serif
			}	
			body{
				min-width:1000px;
				padding-top:42px;
				font-size:12px
			}		
			#wrap{
				background:url(about:blank) no-repeat center 0;
				min-height:904px;
			}
			#container{
				width:1080px;
				margin:0 auto
			}
			.content{
				width:1060px;
			}
			.logo{
				width: 180px;
				height: 135px;
				margin: 0 57px 0 -36px;
				float: left;
			}
			.logo a{
				display: block;
				height: 100%;
			}
			.main-menu{
				position: relative;
				z-index:2;
				width:790px;
				height: 20px;
				margin: 40px auto auto auto;
				float:left
			}
						
			.main-menu-top{
				display: block;
				height: 20px;
				width: 112px;
				float: left;
			}	
			.main-menu-top a{
				display: block;
				height: 100%;
			}
			.main-menu-list{
				position: absolute;
				z-index:2;
				top: 80px;
				left: 427px;
				width:790px;
				height: 260px;
				margin: 40px auto auto auto;
				float:left
			}
			.main-menu-list-o0{
				float: left;
				width: 112px;
				height: 100%;
			}
			.main-menu-list-o1{
				float: left;
				width: 97px;
				height: 100%;
				padding-left: 15px;
			}
			.main-menu-list-o2{
				float: left;
				width: 95px;
				height: 100%;
				padding-left: 17px;
			}
			.main-menu-list-o3{
				float: left;
				width: 107px;
				height: 100%;
				padding-left: 5px;
			}
			.main-menu-list-o4{
				float: left;
				width: 109px;
				height: 100%;
				padding-left: 3px;
			}
			.main-menu-list-o5{
				float: left;
				width: 93px;
				height: 100%;
				padding-left: 19px;
			}
			.main-menu-list-o6{
				float: left;
				width: 82px;
				height: 100%;
				padding-left: 30px;
			}
			.main-menu-list a{
				text-decoration: none;
				color:#fff
			}
			.main-menu-list{
				display:inline-block;
			}
			.main-menu-list a:hover{
				color:#ec4828
			}
			.main-menu-list li{
				line-height: 23px;
				}
			.top-chapter{
				width: 250px;
				height: 80px;
				position: absolute;
				left: 620px;
				top: 390px;
			}
			.top-chapter #detail{
				display: block;
				height: 100%;
				overflow: hidden;
			}		
			.action{
				float: left;
				position: absolute;
				top: 500px;
				left: 230px;
			}
			.leftmenu{
				background-color: #021D35;
				background-image: url(imgs/sprite-bg.png);
				width: 213px;
				height: 277;
				float: left;
				position: absolute;
				top: 473px;
				left: 410px;
				
			}
			.down{
				width: 100%;
				height: 160px;
				float: left;
			}
			.regist{
				width: 100%;
				height: 50px;
				float: left;
				}
			.pay{
				width: 100%;
				height: 67px;
				float: left;
			}
			.down a{
				display: block;
				height: 160px;
 			}
			.regist a{
				display: block;
				height: 50px;
			}
			.pay a{
				display: block;
				height: 67px;
			} 
			
		</style>
		
		<style type="text/css">
			#Photos{
        position:absolute;
				left: 623px;
				top: 480px;
        overflow:hidden;
        height:270px;
        width:450px;
			}
			#Photos li{
        position:absolute;
        left:0;
        top:0;
			}
			ul,li{
        list-style:none;
        margin:0;
        padding:0;
      }
			img{
        display:block;
       }
			.Photos-nav{
        display:inline-block;
        margin-right:8px;
        color:#fff;
        padding:2px 6px;
        background:#333;
        border:1px solid #fff;
        font-family:Tahoma;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
      }
			.Photos-cur-nav{				
        display:inline-block;
        margin-right:8px;
        color:#fff;
        padding:2px 6px;
        background:#ff7a00;
        border:1px solid #fff;
        font-family:Tahoma;
        font-weight:bold;
        font-size:12px;
        cursor:pointer;
      }
</style>
		<script type="text/javascript">
				var DongHua={};
				function FoundId(id){
         return document.getElementById(id)
         }       
				function FoundName(c,p){
         return p.getElementsByTagName(c)
         }       
				DongHua.Photos = function(){
						function init(anchor,options){
                   this.anchor = anchor;
                   var wp = FoundId(options.id),
                            ul = FoundName('ul',wp)[0],
                            li = this.li = FoundName('li',ul);
                   this.index = options.position?options.position:0;
                   this.a = options.auto?options.auto:2;
                   this.cur = this.z = 0;
                   this.l = li.length;
                   this.img = [];
                   for(var k=0;k<this.l;k++){
                            this.img.push(FoundName('img',this.li[k])[0]);
                   }
                   this.curC = options.curNavClass?options.curNavClass:'Photos-cur-nav';
                   nav_wp = document.createElement('div');
                   nav_wp.id = 'Photos-nav';
                   nav_wp.style.cssText = 'position:absolute;right:0;bottom:0;padding:8px 0;';
                   var alt = this.alt = document.createElement('p');
                   for(var i=0;i<this.l;i++){
                            this.li[i].o = 100;
                            //setOpacity(this.li[i],this.li.o);
                            this.li[i].style.opacity = this.li[i].o/100;
                            this.li[i].style.filter = 'alpha(opacity='+this.li[i].o+')';
                            //绘制控制器
                            var nav = document.createElement('a');
                            nav.className = options.navClass?options.navClass:'Photos-nav';
                            nav.innerHTML = i+1;
                            nav.onclick = new Function(this.anchor+'.pos('+i+')');
                            nav_wp.appendChild(nav);
                   }
                   wp.appendChild(alt);                
                   wp.appendChild(nav_wp);
                   this.textH = nav_wp.offsetHeight;
                                     alt.style.cssText = 'color:#fff;font-size:12px;padding-left:20px;margin:0;position:absolute;left:0;bottom:0;overflow:hidden;width:100%;background:#000;opacity:0.7;filter:alpha(opacity=70);';
                                     alt.style.height = alt.style.lineHeight = this.textH+'px';
                   this.pos(this.index);
         }
         init.prototype={
                   auto:function(){
                            this.li.a = setInterval(new Function(this.anchor+'.move(1)'),this.a*1000);
                   },
                   move:function(i){
                            var n = this.cur+i;
                            var m = i==1?n==this.l?0:n:n<0?this.l-1:n;
                            this.pos(m);
                   },
                   pos:function(i){
                            clearInterval(this.li.a);
                            clearInterval(this.li[i].f);
                            var curLi = this.li[i];
                            this.z++;
                            curLi.style.zIndex = this.z;
                            this.alt.style.zIndex = this.z+1;
                            nav_wp.style.zIndex = this.z+2;
                            this.li.a=false;//这句话是必要的
                            this.cur = i;
                            //setOpacity(curLi[i],0);
                            if(this.li[i].o>=100){
                                     this.li[i].o = 0;
                                     curLi.style.opacity = 0;
                                     curLi.style.filter = 'alpha(opacity=0)';
                                     this.alt.style.height = '0px';
                            }
                            for(var x=0;x<this.l;x++){
                                     nav_wp.getElementsByTagName('a')[x].className = x==i?this.curC:'Photos-nav';
                                     }
                            this.alt.innerHTML = this.img[i].alt;
                            this.li[i].f = setInterval(new Function(this.anchor+'.fade('+i+')'),20);
                   },
                   fade:function(i){
                   var p=this.li[i];
                            if(p.o>=100){
                                     clearInterval(p.f);
                                     if(!this.li.a){//一定要在这里做个是否已经clearInterval的判断，要不然在快速点击的时候会导致图片不停地闪
                                               this.auto();
                                     }
                            }
                            else{
                                     p.o+=5;
                                     //setOpacity(this.li[i],this.li[i].o);
                                     p.style.opacity = p.o/100;
                                     p.style.filter = 'alpha(opacity='+p.o+')';
                                     this.alt.style.height = Math.ceil(p.o*this.textH/100)+'px';
                            }
                   }
         };
         return {init:init};
}();
</script>
	</head>
	<body>
		<div id="wrap" style="background-image: url(imgs/bg3.jpg);">
			<div id="container">
				<div class="head">
					<h1 class="logo"><a href="main.html"></a></h1>
					<h2 class="top-chapter"><a href="1.html" target="_blank" id="detail"></a></h2>	
				</div>
			<div class="main-menu">
				<h1 class="main-menu-top"><a href="main.html"></a></h1>
				<h1 class="main-menu-top"><a href="main.html"></a></h1>
				<h1 class="main-menu-top"><a href="main.html"></a></h1>
				<h1 class="main-menu-top"><a href="main.html"></a></h1>
				<h1 class="main-menu-top"><a href="main.html"></a></h1>
				<h1 class="main-menu-top"><a href="main.html"></a></h1>
				<h1 class="main-menu-top"><a href="main.html"></a></h1>
			</div>
			<div class="main-menu-list">
				<div class="main-menu-list-o0">
					<ul>
						<li><a href="" target="_blank">共创社区</a></li>
						<li><a href="" target="_blank">世界观</a></li>
						<li><a href="" target="_blank">周边商城</a></li>
						<li><a href="" target="_blank">道聚城</a></li>
					</ul>
				</div>
				<div class="main-menu-list-o1">
					<ul>
						<li><a href="" target="_blank">新闻公告</a></li>
						<li><a href="" target="_blank">版本专题</a></li>
						<li><a href="" target="_blank">职业攻略</a></li>
						<li><a href="" target="_blank">壁纸时装</a></li>
						<li><a href="" target="_blank">视频中心</a></li>
					</ul>
				</div>
				<div class="main-menu-list-o2">
					<ul>
						<li><a href="" target="_blank">官方活动</a></li>
						<li><a href="" target="_blank">合作活动</a></li>
						<li><a href="" target="_blank">媒体活动</a></li>
						<li><a href="" target="_blank">网吧特权</a></li>
					</ul>
				</div>
				<div class="main-menu-list-o3">
					<ul>
						<li><a href="" target="_blank">F1天王赛</a></li>
						<li><a href="" target="_blank">职业联赛</a></li>
						<li><a href="" target="_blank">职业第一人</a></li>
						<li><a href="" target="_blank">DPL赛事</a></li>
					</ul>
				</div>
				<div class="main-menu-list-o4">
					<ul>
						<li><a href="" target="_blank">充值</a></li>
						<li><a href="" target="_blank">兑换CDKEY</a></li>
						<li><a href="" target="_blank">角色恢复</a></li>
						<li><a href="" target="_blank">圣耀服务</a></li>
					</ul>
				</div>
				<div class="main-menu-list-o5">
					<ul>
						<li><a href="" target="_blank">安全任务</a></li>
						<li><a href="" target="_blank">处罚申诉</a></li>
						<li><a href="" target="_blank">视频举报</a></li>
						<li><a href="" target="_blank">被盗找回</a></li>
						<li><a href="" target="_blank">信用星级</a></li>
					</ul>
				</div>
				<div class="main-menu-list-o6">
					<ul>
						<li><a href="">DNF助手</a></li>
						<li><a href="" target="_blank">论坛</a></li>
						<li><a href="">微信</a></li>
						<li><a href="" target="_blank">微博</a></li>
						<li><a href="" target="_blank">问答</a></li>
					</ul>
				</div>			
			</div>	
		</div>
		<div class="content">
			<div id="Photos" >
         <ul>	 
					 <li><a href="http://www.baidu.com" target="_blank"><img src="img/photo_1.jpg"></a></li>
					 <li><a href="http://www.baidu.com" target="_blank"><img src="img/photo_2.jpg"></a></li>
           <li><a href="http://www.baidu.com" target="_blank"><img src="img/photo_3.jpg"></a></li>
           <li><a href="http://www.baidu.com" target="_blank"><img src="img/photo_4.jpg"></a></li>
           <li><a href="http://www.baidu.com" target="_blank"><img src="img/photo_5.jpg"></a></li>
				   <li><a href="http://www.baidu.com" target="_blank"><img src="img/photo_6.jpg"></a></li>
					 <li><a href="http://www.baidu.com" target="_blank"><img src="img/photo_7.jpg"></a></li>
         </ul>
			</div>
			<div class="leftmenu">
				<div class="down"><a href="main.html"></a></div>
				<div class="regist"><a href="dnf.qq.com"></a></div>
				<div class="pay"><a href="1.html"></a></div>
					
					
					
			</div>
		</div>
		
<script type="text/javascript">
         var Photos = new DongHua.Photos.init('Photos',{id:'Photos'});
</script>
	</body>
	
</html>
